import { useI18n } from 'vue-i18n'
import { defineComponent } from 'vue'
import IconHome from 'virtual:vite-icons/carbon/home'
import IconLang from 'virtual:vite-icons/carbon/language'
import IconMoon from 'virtual:vite-icons/carbon/moon'
import IconSun from 'virtual:vite-icons/carbon/sun'
import IconDicomOverlay from 'virtual:vite-icons/carbon/dicom-overlay'
import IconLogoGithub from 'virtual:vite-icons/carbon/logo-github'
import { isDark, toggleDark } from '../store/dark'

export const Footer = defineComponent({
  name: 'Footer',
  setup() {
    const { t, availableLocales, locale } = useI18n()
    return {
      t,
      availableLocales,
      locale,
      toggleLocales() {
        // change to some real logic
        const locales = availableLocales
        locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
      }
    }
  },
  render() {
    return <nav class="text-xl mt-6">
      <router-link class="icon-btn mx-2" to="/" title={this.t('button.home')}>
        <IconHome />
      </router-link>

      <a class="icon-btn mx-2" title={this.t('button.toggle_dark')} onClick={toggleDark}>
        {isDark ? <IconMoon/> : <IconSun/>}
      </a>

      <a class="icon-btn mx-2" title={this.t('button.toggle_langs')} onClick={this.toggleLocales}>
        <IconLang />
      </a>

      <router-link class="icon-btn mx-2" to="/about" title={this.t('button.about')}>
        <IconDicomOverlay />
      </router-link>

      <a
        class="icon-btn mx-2"
        rel="noreferrer"
        href="https://github.com/antfu/vitesse"
        target="_blank"
        title="GitHub"
      >
        <IconLogoGithub />
      </a>

      <router-link class="" to="/test">
      Test
      </router-link>
    </nav>
  }
})
